const canvas = document.getElementById('cone');
const ctx = canvas.getContext('2d');
// 圆锥参数
const allHeight = document.getElementById("cone").getAttribute("height"); //
const allWeight = document.getElementById("cone").getAttribute("width"); //
const centerX = allWeight / 4.6; // 圆心X坐标
const height = 0.75 * allHeight;  // 图形总高度
const wight = 0.5 * allHeight;  // 图形总宽度
const lineStop = allWeight / 1.5;  // 虚线结束
const textDigit = 20;  // 数码文字大小

const textDigitB = 15;  // 数码文字单位大小
const textSize = 14;  // 普通文字大小

const textStart = allWeight / 1.6;  // 文字开始
const LImg = -85;  // 图标1位置
const Lbg = -79;  // 文字1位置
const LText1 = -40;  // 文字1位置
const LText2 = -18;  // 文字2位置
const LText3 = 8;  // 文字3位置
const LText4 = 50;  // 文字4位置


// drawTri(100/date_json.length,100/date_json.length,height/date_json.length)

function getDateJson(date) {
    let pHeight = height / date.length
    for (const index in date) {
        let dIndex = date.length - parseInt(index) - 1
        if (dIndex === 0) {
            drawTri(
                0,
                (wight / date.length) - (pHeight * 0.1),
                pHeight,
                date[dIndex].color,
                date[dIndex])
        } else {
            drawTrapezium(
                pHeight * (dIndex) + (pHeight * 0.3) * dIndex,
                (wight / date.length) * (dIndex + 1) - (pHeight * 0.1),
                (wight / date.length) * dIndex,
                pHeight
                , date[dIndex].color,
                date[dIndex])
        }
    }

}


// 绘制三角形
function drawTri(bCenterY, bWidth, h, color, date) {
    const topPoint = {x: centerX, y: bCenterY};

    var gnt = ctx.createLinearGradient(
        textStart + Lbg , topPoint.y + 5,
        textStart + Lbg + 250, topPoint.y + h);
    gnt.addColorStop(0, color);
    gnt.addColorStop(1, "rgba(0,0,0,0)");
    ctx.beginPath();
    ctx.moveTo(textStart + Lbg + 30, topPoint.y + h - 20);
    ctx.lineTo(textStart + Lbg + 235, topPoint.y + h - 20);
    ctx.lineTo(textStart + Lbg + 235, topPoint.y + h);
    ctx.lineTo(textStart + Lbg + 18, topPoint.y + h);
    ctx.fillStyle = gnt;
    ctx.fill();


    ctx.beginPath();
    ctx.ellipse(topPoint.x, topPoint.y + h, 0.99 * bWidth, 0.15 * bWidth, 0, 0, 2 * Math.PI);
    ctx.fillStyle = color;
    ctx.fill();

    // 三角形
    ctx.beginPath();
    ctx.moveTo(topPoint.x, topPoint.y);
    ctx.lineTo(topPoint.x - bWidth, topPoint.y + h);
    ctx.lineTo(topPoint.x + bWidth, topPoint.y + h);
    ctx.fillStyle = color;
    ctx.fill();

    ctx.lineWidth = 1;
    ctx.strokeStyle = 'rgb(255,255,255)';
    ctx.beginPath();
    ctx.setLineDash([3, 3]);
    ctx.moveTo(topPoint.x + bWidth, topPoint.y + h);
    ctx.lineTo(lineStop, topPoint.y + h);
    ctx.stroke();

    var img2 = new Image();
    img2.onload = function () {
        ctx.drawImage(this, textStart + LImg,  topPoint.y-(20-h)   ,35,23);;
    }
    img2.src = date.img;


    ctx.font = textDigit + "px DIGIT";
    ctx.fillStyle = 'rgb(255,255,255)';
    ctx.fillText(date.value1, textStart + LText1, topPoint.y + h - 5);

    ctx.font = textDigitB + "px 微软雅黑";
    ctx.fillText("个", textStart + LText2, topPoint.y + h - 6);

    ctx.font = textSize + "px 微软雅黑";
    ctx.fillStyle = 'rgb(255,255,255)';
    ctx.fillText(date.value2, textStart + LText3, topPoint.y + h - 5);
    ctx.fill();

    ctx.fillText(date.label, textStart + LText4, topPoint.y + h - 5);

}

function drawTrapezium(bCenterY, bWidth, tWidth, h, color, date) {
    const bCenterPoint = {x: centerX, y: bCenterY};
    var gnt = ctx.createLinearGradient(
        textStart + Lbg , bCenterPoint.y + 5,
        textStart + Lbg + 250, bCenterPoint.y + h);
    gnt.addColorStop(0, color);
    gnt.addColorStop(1, "rgba(0,0,0,0)");
    ctx.beginPath();
    ctx.moveTo(textStart + Lbg + 30, bCenterPoint.y + h - 20);
    ctx.lineTo(textStart + Lbg + 235, bCenterPoint.y + h - 20);
    ctx.lineTo(textStart + Lbg + 235, bCenterPoint.y + h);
    ctx.lineTo(textStart + Lbg + 18, bCenterPoint.y + h);
    ctx.fillStyle = gnt;
    ctx.fill();



    ctx.beginPath();
    ctx.ellipse(bCenterPoint.x, bCenterPoint.y + h, 0.99 * bWidth, 0.15 * bWidth, 0, 0, 2 * Math.PI);
    ctx.fillStyle = color;
    ctx.fill();


    ctx.beginPath();
    ctx.moveTo(bCenterPoint.x - bWidth, bCenterPoint.y + h);
    ctx.lineTo(bCenterPoint.x - tWidth, bCenterPoint.y);
    ctx.lineTo(bCenterPoint.x + tWidth, bCenterPoint.y);
    ctx.lineTo(bCenterPoint.x + bWidth, bCenterPoint.y + h);
    // ctx.fillStyle = 'linear-gradient(rgba(84, 112, 198, 0.7), rgba(84, 112, 198, 1))';
    ctx.fillStyle = color;
    ctx.fill();


    ctx.beginPath();
    ctx.ellipse(bCenterPoint.x, bCenterPoint.y, 0.99 * tWidth, 0.15 * tWidth, 0, 0, 2 * Math.PI);
    ctx.fillStyle = color;
    ctx.fill();


    ctx.lineWidth = 1;
    ctx.strokeStyle = 'rgb(255,255,255)';
    ctx.beginPath();
    ctx.setLineDash([3, 3]);
    ctx.moveTo(bCenterPoint.x + bWidth, bCenterPoint.y + h);
    ctx.lineTo(lineStop, bCenterPoint.y + h);
    ctx.stroke();


    var img2 = new Image();
    img2.onload = function () {
        ctx.drawImage(this, textStart + LImg, bCenterPoint.y-(20-h)    ,35,23);
    }
    img2.src = date.img;

    ctx.font = textDigit + "px DIGIT";
    // ctx.fillStyle = color;
    ctx.fillStyle = 'rgb(255,255,255)';
    ctx.fillText(date.value1, textStart + LText1, bCenterPoint.y + h - 5);


    ctx.font = textDigitB + "px 微软雅黑";
    ctx.fillStyle = 'rgb(255,255,255)';
    ctx.fillText("个", textStart + LText2, bCenterPoint.y + h - 6);

    ctx.font = textSize + "px 微软雅黑";

    ctx.fillStyle = 'rgb(255,255,255)';
    ctx.fillText(date.value2, textStart + LText3, bCenterPoint.y + h - 5);
    ctx.fill();

    ctx.fillText(date.label, textStart + LText4, bCenterPoint.y + h - 5);
}

